<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    body {
      margin: 0;
    }
    #container {
      width: 400px;
      height: 400px;
      overflow: auto;
    }
    #video {
      height: 200vh;
      width: 200vw;
    }
  </style>
</head>
<body>
<div id="container">
  <video src="" id="video"></video>
</div>
<script>
  video.addEventListener('mousemove',handleMouseMove)
  function handleMouseMove(e){
    console.log('window.onmousemove---:', e);

    //注意这里有个小陷进
    //pageX pageY只适用于 没有中间元素设置 overflow的情况,
    //pageX pageY永远是相对于浏览器视口的
    //因为一旦中间元素设置了overflow,
    //你拉动滚动条 再在上面移动鼠标 其实相对于浏览器视口的相对位置还是没有变的
    //这并不是我们想要的结果
    //So 应该还要加上滚动容器滚动的距离

    console.log('container.scrollTop:',container.scrollTop);
    console.log('container.scrollLeft:',container.scrollLeft);

    const data = {
      pageX: e.pageX + container.scrollLeft,
      pageY: e.pageY + container.scrollTop,
      button: e.button,
      video: {
        width: video.getBoundingClientRect().width,
        height: video.getBoundingClientRect().height
      }
    };

    console.log('要发送给傀儡端robot响应的数据为 ---> data:', data);
  }
</script>
</body>
</html>
